import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_appdemo02/list/picture.dart';

class WaterfallsPage extends StatefulWidget {
  @override
  _WaterfallsPageState createState() => _WaterfallsPageState();
}

class _WaterfallsPageState extends State<WaterfallsPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("瀑布流"),
      ),
      body: StaggeredGridView.countBuilder(
        crossAxisCount: 4,
        itemCount: picture.length,
        itemBuilder: (BuildContext context, int index) => Container(
          margin: EdgeInsets.all(2),
          child: Container(

            child: Text(
              picture[index]["title"],
              style: TextStyle(
                color: Colors.white
              ),
            ),
          ),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                  image: NetworkImage(
                    picture[index]["imageUrl"],
                  ),
                  fit: BoxFit.cover)),
        ),
        staggeredTileBuilder: (int index) =>
            new StaggeredTile.count(2, index.isEven ? 2 : 1),
        mainAxisSpacing: 4.0,
        crossAxisSpacing: 4.0,
      ),
    );
  }
}
